<template>
	<el-form-item label="url">
		<div class="center">
			<el-input v-model="info.url"></el-input>
			<div class="center">
				<el-tag class="methodsTag" size="small" closable @close="info.methods.splice(index, 1)"
					v-for="(item, index) of info.methods" :key="index">
					{{ item }}
				</el-tag>
				<el-button type="primary" size="mini" circle icon="el-icon-plus" @click="dialogVisible=true">
				</el-button>
				<el-dialog title="methods" :visible.sync="dialogVisible" width="30%">
					<el-checkbox-group v-model="info.methods" size="mini">
						<el-checkbox-button :label="item" border v-for="(item,index) of typeOptions" :key="index"></el-checkbox-button>
					</el-checkbox-group>
					<span slot="footer" class="dialog-footer">
						<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
					</span>
				</el-dialog>
			</div>
		</div>
	</el-form-item>
</template>

<script>
	export default {
		name: 'url',
		props: {
			info: {
				type: Object,
			},
		},
		model: ["info"],
		data() {
			return {
				dialogVisible: false,
				typeOptions: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'COPY', 'HEAD','OPTIONS','LINK','UNLINK','PURGE','LOCK','UNLOCK','PROPFIND','VIEW'],
			}
		},
		methods: {
			addMethodsTag() {

			}
		},
		created() {

		}
	}
</script>

<style scoped="">
	.center {
		display: flex;
		align-items: center;
	}
	.methodsTag{
		margin: 0 5px;
	}
</style>
